<template>
  <div class="panel">
    <el-form  :model="regForm" status-icon :rules="regRules" ref="regForm">
      <el-form-item prop="name" label="昵称：" label-width="80px">
        <el-input type="text" placeholder="昵称" :disabled="true" :maxlength="20" size="large" v-model="regForm.name" > </el-input>
      </el-form-item>
      <el-form-item prop="sex" label="性别：" label-width="80px" v-if="regForm.sex">
      <el-select v-model="regForm.sex" placeholder="性别" style="width:100%;">
        <el-option label="男" value="男"></el-option>
        <el-option label="女" value="女"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="birth" label="生日：" label-width="80px" v-if="regForm.birth">
        <el-date-picker style="width:100%;" v-model="regForm.birth" type="date" format="yyyy-MM-dd" placeholder="出生日期"></el-date-picker>
      </el-form-item>
      <el-form-item prop="email" label="邮箱：" label-width="80px" :rules="[
        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
        ]">
      <el-input v-model="regForm.email" placeholder="邮箱"></el-input>
      </el-form-item>
      <el-form-item label="类型：" label-width="80px">
        <el-input type="text" placeholder="用户类型" :disabled="true" v-model="regForm.type" :maxlength="11" size="large">1</el-input>
      </el-form-item>
      <el-form-item label-width="80px" style="width:100%;" class="login-btn">
        <el-button type="primary" size="large" style="width:100%;" @click.native.prevent="regSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    data() {
      var validateUserName = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入内容！'))
        } else {
          callback();
        }
      }
      return {
        logining: false,
        loadShow: true,
        regForm:{
          email:'',
          birth:'',
          uid:'',
          name:'',
          sex:''
        },
        regRules:{
          uid: [
            { required: true, validator: validateUserName, trigger: 'blur' }
          ],
          name: [
            { required: true, validator: validateUserName, trigger: 'blur' }
          ],
          sex: [
            { required: true, message: '请选择性别！', trigger: 'change' }
          ]
        }, 
      }
    },
    props: ['user'],
    created () {
      this.regForm = this.user
    },
    methods: {
      regSubmit(){
        console.log(this.regForm)
        var _this = this
        this.$refs.regForm.validate((valid) => {
          if (valid) {
            this.$ajax.post('/api/c/updateUserInfo',
              _this.regForm
              ).then(function(response){  
                if(response.data.code === 0){
                  sessionStorage.setItem('u', JSON.stringify(_this.regForm))
                }       
              }).catch(function(error){console.log(error);}); 
          } else {
            return false;
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style scoped>
.panel{
  width: 500px;
  margin-left: 20px;
  margin-bottom: 60px;
}
</style>
